  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Gurukul</title>
      
      <!-- Style Starts here --> 
      
      
      <link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />
      <style>
      
          body { 
              background: #f4f4f4;
              font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
              color: #666; 
              -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
              -webkit-text-size-adjust: none;
          }
  
          a, a:visited { color: #C30; text-decoration: none; border-bottom: 1px dotted #C30; }
          a:hover { color: #900; border-bottom-style: solid; }
  
          p { margin-bottom: 20px; }
  
          #content {
              width: 940px;
              padding: 10px;
              margin: 0 auto;
          }
              #content h1 { color: #333; line-height: 1em; }
              #content ul { padding-left: 0; list-style: none; }
                  #content ul li { margin-bottom: 20px; }
  
          #modal { display: none; }
              #modal a { background: #CCC; color: #333; font-weight: bold; padding: 5px 10px; border: none; }
              #modal a:hover { background: #aaa; } 
  
          pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px 20px; }
          
      </style>
      
      
     <!-- Script Starts here --> 
      
	  
	 
  </head>
  
  <body>
  <div id="content">
          <h1>Gurukul  -  The path to effective learning</h1>
          <p> Click to open options</p>
          <ul>
              <li>
                  <a href="sidebar.html" class="first">Slide to the right, and load content from a secondary page.</a>
                  </li>
                  </ul></div>
                <script src="lib/jquery-1.7.1.min.js"></script>
    <script src="plugins/jquery.pageslide.min.js"></script>
    <script>
        /* Default pageslide, moves to the right */
        $(".first").pageslide();
        
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left", modal: true });
    </script>   
  
  
  </body>
  </html>
